import React from 'react';
import { ChevronLeft, Plus, Filter, MapPin } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

const MaterialShare = () => {
  const navigate = useNavigate();
  
  return (
    <div className="flex flex-col h-full pb-16">
      {/* 头部 */}
      <div className="wx-header">
        <div className="wx-header-back" onClick={() => navigate('/')}>
          <ChevronLeft size={24} />
        </div>
        <div className="wx-header-title">物料分享</div>
        <div className="wx-header-action">
          <Filter size={20} />
        </div>
      </div>
      
      <div className="wx-content p-4">
        {/* 分类选择 */}
        <div className="flex overflow-x-auto pb-2 -mx-1 mb-4">
          {['全部', '周边', '卡片', '海报', '签名', '其他'].map((category, index) => (
            <div 
              key={index} 
              className={`px-3 py-1 mx-1 rounded-full text-sm whitespace-nowrap ${
                index === 0 ? 'bg-green-500 text-white' : 'bg-gray-100 text-gray-600'
              }`}
            >
              {category}
            </div>
          ))}
        </div>
        
        {/* 物料列表 */}
        <div className="space-y-4">
          {[1, 2, 3, 4, 5].map((item) => (
            <div key={item} className="bg-white rounded-lg shadow-sm overflow-hidden">
              {/* 用户信息 */}
              <div className="p-3 flex items-center">
                <div className="w-10 h-10 rounded-full bg-gray-200"></div>
                <div className="ml-2">
                  <p className="font-medium">用户名称</p>
                  <div className="flex items-center text-xs text-gray-500">
                    <MapPin size={12} className="mr-1" />
                    <span>北京</span>
                  </div>
                </div>
              </div>
              
              {/* 物料描述 */}
              <div className="px-3 pb-2">
                <p className="text-sm mb-2">我有明星最新专辑的签名CD，想换同款海报，有意者私聊~</p>
                
                {/* 物料图片 */}
                <div className="grid grid-cols-3 gap-1 mb-3">
                  {[1, 2, 3].map((img) => (
                    <div key={img} className="aspect-square bg-gray-200 rounded"></div>
                  ))}
                </div>
                
                {/* 标签 */}
                <div className="flex flex-wrap gap-1 mb-3">
                  <span className="wx-tag">签名CD</span>
                  <span className="wx-tag">限量版</span>
                  <span className="wx-tag">明星周边</span>
                </div>
                
                {/* 交换意向 */}
                <div className="bg-gray-50 p-2 rounded text-sm">
                  <p className="font-medium mb-1">交换意向：</p>
                  <p className="text-gray-600">同款海报或其他同等价值周边</p>
                </div>
                
                {/* 操作按钮 */}
                <div className="flex justify-between mt-3">
                  <button className="wx-button-outline text-sm py-1 px-3 rounded-full">联系TA</button>
                  <button className="wx-button text-sm py-1 px-3 rounded-full">申请交换</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      
      {/* 发布按钮 */}
      <div className="fixed right-5 bottom-20">
        <button className="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center shadow-lg">
          <Plus size={24} className="text-white" />
        </button>
      </div>
    </div>
  );
};

export default MaterialShare;